import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
import { MockDataGenerator } from '../utils/mockData'
import type { EChartsOption } from 'echarts'

use([
  CanvasRenderer,
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
])

export default defineComponent({
  name: 'RealtimeLineChart',
  components: {
    VChart
  },
  props: {
    title: {
      type: String,
      default: '实时数据监控'
    }
  },
  setup(props) {
    const chartData = ref<Array<{ time: string; value: number }>>(
      MockDataGenerator.generateTimeSeriesData(20, 30, 90)
    )

    const option = ref<EChartsOption>({
      title: {
        text: props.title,
        left: 'center',
        textStyle: {
          color: '#00d4ff',
          fontSize: 18,
          fontWeight: 'bold'
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, 0.8)',
        borderColor: '#00d4ff',
        borderWidth: 1,
        textStyle: {
          color: '#fff'
        }
      },
      grid: {
        left: '50',
        right: '30',
        top: '60',
        bottom: '30',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: chartData.value.map(d => d.time),
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: '#00d4ff',
            width: 1
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.7)',
          fontSize: 10
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: 'rgba(0, 212, 255, 0.1)'
          }
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#00d4ff',
            width: 1
          }
        },
        axisLabel: {
          color: 'rgba(255, 255, 255, 0.7)'
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(0, 212, 255, 0.1)'
          }
        }
      },
      series: [
        {
          name: '数值',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 6,
          data: chartData.value.map(d => d.value),
          lineStyle: {
            width: 3,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                { offset: 0, color: '#00d4ff' },
                { offset: 1, color: '#0066ff' }
              ]
            }
          },
          itemStyle: {
            color: '#00d4ff',
            borderColor: '#fff',
            borderWidth: 2
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(0, 212, 255, 0.5)' },
                { offset: 1, color: 'rgba(0, 212, 255, 0.05)' }
              ]
            }
          }
        }
      ]
    })

    let stopStream: (() => void) | null = null

    onMounted(() => {
      stopStream = MockDataGenerator.createRealTimeDataStream((newData) => {
        chartData.value = [...chartData.value.slice(1), {
          time: newData.timestamp,
          value: newData.value
        }]

        option.value = {
          ...option.value,
          xAxis: {
            ...option.value.xAxis as any,
            data: chartData.value.map(d => d.time)
          },
          series: [{
            ...option.value.series![0] as any,
            data: chartData.value.map(d => d.value)
          }]
        }
      }, 2000)
    })

    onUnmounted(() => {
      if (stopStream) {
        stopStream()
      }
    })

    return () => (
      <div class="chart-container">
        <VChart option={option.value} autoresize style="height: 100%; width: 100%;" />
      </div>
    )
  }
})
